<template>
  <div>
    <el-row class="home" :gutter="20">
      <el-col :span="8" style="margin-top: 20px;">
        <el-card shadow="hover" class="">
          <div class="user">
            <img :src="getImageUrl('user')" class="user">
            <div class="user-info">
              <p class="user-info-admin">admin</p>
              <p class="user-info-p">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登陆时间:<span>20250603</span></p>
            <p>上次登陆地点:<span>成都</span></p>
          </div>
        </el-card>
        <el-card shadow="hover" class="user-table">
          <div>
            <el-table :data="tableData">
              <el-table-column
                v-for="(val, key) in tableLabel"
                :key="key"
                :prop="key"
                :label="val"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" style="margin-top: 20px;">
        <div class="num"> 
          <el-card 
            :body-style="{display:'flex',padding:0}" 
            shadow="hover"
            v-for="item in countData"
            :key="item.name">
            <component :is="item.icon" class="icons" :style="{background:item.color}"></component>
            <div class="detail">
              <p class="num">￥{{ item.value }}</p>
              <p class="txt">￥{{ item.name }}</p>
            </div>
          </el-card>
          <el-card class="top-echarts">
            <div ref="charts" style="height: 240px;width: 100%;"></div>
          </el-card>
          <div class="graph">
            <el-card>
              <div ref="userEchart" style="height: 190px;"></div>
            </el-card>
            <el-card>
              <div ref="videoEchart" style="height: 190px;"></div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang='ts'>
  import {ref,getCurrentInstance,onMounted,reactive} from 'vue'
  import axios from 'axios'
  import * as echarts from 'echarts'

  // proxy相当于我们vue2中的this.$api了，能够解构出我们创建的全局变量
  const {proxy} = getCurrentInstance()
  
  const getImageUrl = (user)=>{
    return new URL(`../assets/images/${user}.png`,import.meta.url).href
  }

  const tableLabel = ref({
    name: "课程",
    todayBuy: "今日购买",
    monthBuy: "本月购买",
    totalBuy: "总购买",
  })
  const tableData = ref([])
  const countData = ref([])

  onMounted(()=>{
    getTableData()
    getCountData()
    getChartData()
  })
  const getTableData = async()=>{
    const data = await proxy.$api.getUrlData('/api/home/getTableData')
    tableData.value = data.tableData
  }
  // mock请求可以拦截这个请求，走mock的回调
  /*
    axios({
      url:'/api/home/getTableData',
      method:'get'
    }).then(res=>{
      console.log(res.data)
      if(res.data.code == 200){
        tableData.value = res.data.data.tableData
      }
    })
  */
  const getCountData = async()=>{
    const data = await proxy.$api.getUrlData('/api/home/getCountData')
    countData.value = data
  }

  const xOptions = reactive({
    // 图例文字颜色
    textStyle: {
      color: "#333",
    },
    legend: {},
    grid: {
      left: "20%",
    },
    // 提示框
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category", // 类目轴
      data: [],
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
      axisLabel: {
        interval: 0,
        color: "#333",
      },
    },
    yAxis: [
      {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#17b3a3",
          },
        },
      },
    ],
    color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
    series: [],
  })

  const pieOptions = reactive({
    tooltip: {
      trigger: "item",
    },
    legend: {},
    color: [
      "#0f78f4",
      "#dd536b",
      "#9462e5",
      "#a6a6a6",
      "#e1bb22",
      "#39c362",
      "#3ed1cf",
    ],
    series: []
  })
  const observer = ref(null)
  const getChartData = async()=>{
    const {orderData,videoData,userData} = await proxy.$api.getUrlData('api/home/getChartData')
    // 对第一个图标进行设置
    xOptions.xAxis.data = orderData.date;
    xOptions.series = Object.keys(orderData.data[0]).map(val=>{
      return {
        name:val,
        data:orderData.data.map(item=>item[val]),
        type:'line'
      }
    })
    const OneEcharts = echarts.init(proxy.$refs['charts'])
    OneEcharts.setOption(xOptions)

    // 第二个表格
    xOptions.xAxis.data = userData.map((item) => item.date)
    xOptions.series = [
      {
        name: "新增用户",
        data: userData.map((item) => item.new),
        type: "bar",
      },
      {
        name: "活跃用户",
        data: userData.map((item) => item.active),
        type: "bar",
      }
    ]
    const TwoEcharts = echarts.init(proxy.$refs["userEchart"])
    TwoEcharts.setOption(xOptions)

    //对第三个图表的series赋值
    pieOptions.series = [
      {
        data: videoData,
        type: "pie",
      },
    ]
    //three
    const ThreeEcharts = echarts.init(proxy.$refs["videoEchart"])
    ThreeEcharts.setOption(pieOptions);


    //ResizeObserver 如果监视的容器大小变化，如果改变会执行传递的回调
    observer.value = new ResizeObserver(entries => {
        OneEcharts.resize()
        TwoEcharts.resize()
        ThreeEcharts.resize()
    })
    //调用监视器的observe方法，监视这个容器的大小
    observer.value.observe(proxy.$refs["charts"]);
    observer.value.observe(proxy.$refs["userEchart"]);
    observer.value.observe(proxy.$refs["videoEchart"]);
  }

</script>
 
<style scoped lang="less">
  .home{
    height: 100%;
    overflow: hidden;
    .user{
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
      img{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40px;
      }
      .user-info{
        p{
          line-height: 40px;
        }
        .user-info-admin{
          font-size: 35px;
        }
        .user-info-p{
          color: #999;
        }
      }
    }
    .login-info{
      p{
        line-height: 30px;
        font-size: 14px;
        color: #999;
        span{
          color: #666;
          margin-left: 60px;
        }
      }
    }
    .user-table{
      margin-top: 20px;
    }
    .num{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .el-card{
        width: 32%;
        margin-bottom: 10px;
      }
      .icons{
        width: 50px;
        height: 50px;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        color:#fff;
      }
      .detail{
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .num{
          font-size: 15px;
          margin-bottom: 10px;
        }
        .txt{
          font-size: 12px;
          text-align: center;
          color: #999;
        }
      }
      .top-echarts{
        width: 100%;
      }
      .graph{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 190px;
        margin-top: 20px;
        .el-card{
          width: 49.5%;
          
        }
      }
    }
  }
</style>